<template>
	<view class="cart-container">
		<view v-if="cartItems.length === 0" class="empty-cart">
			购物车为空
		</view>
		<view v-else>
			<uni-list>
				<div v-for="(item, index) in cartItems" :key="index">
					<cart-item :item="item" @quantity-change="updateCartItemQuantity" @remove="removeCartItem"
						@checkbox-change="checkboxChange" />
				</div>
			</uni-list>
			<checkbox-group @change="toggleSelectAll">
				<checkbox class="checkbox" :checked="selectAll" />全选
			</checkbox-group>
			<view class="total-price">
				总价: {{ totalPrice }}元
			</view>
			<view class="checkout-button" @tap="checkout">
				去结算
			</view>
		</view>
	</view>
</template>

<script>
	import cartItem from "@/components/cartItem.vue"
	export default {
		onLoad() {
			// const pageRoute = uni.getPageRoute(this);
			console.log(this.$options)
			// console.log(11111111,pageRoute.meta.requiresAuth)
			// 假设你的登录状态保存在 Vuex 的状态中


		},
		components: {
			cartItem
		},
		data() {
			return {
				selectAll: false, // 添加 selectAll 属性，默认为 false
				cartItems: [],
				order: {
					items: [], // 用于存储选定的商品
					totalPrice: 0, // 订单总价
				},
			}
		},
		methods: {
			updateCartItemQuantity(item, quantity) {
				const index = this.cartItems.findIndex(cartItem => cartItem.id === item.id)
				if (index !== -1) {
					this.cartItems[index].quantity = quantity
				}
			},
			removeCartItem(item) {
				this.cartItems = this.cartItems.filter(cartItem => cartItem.id !== item.id)
			},
			calculateTotalPrice() {
				console.log("计算")
				return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
			},
			async checkout() {
				// 创建订单
				const selectedItems = this.cartItems.filter((item) => item.selected);
				if (selectedItems.length === 0) {
					// 没有选定商品，不执行结算操作
					return;
				}
				// 更新订单对象
				this.order.items = selectedItems;
				this.order.totalPrice = this.totalPrice;
				this.order.shipping_address = "上海市浦东新区";

				// 处理结算逻辑，可以跳转到订单确认页面或支付页面
				console.log(this.order)
				// return 
				var response = await this.$http.createOrder(this.order);
				if (response.code == 1) {
					uni.navigateTo({
						url: '/pages/order/index'
					});
				}


			},
			checkboxChange(item) {
				const index = this.cartItems.findIndex((cartItem) => cartItem.id === item.id);
				if (index !== -1) {
					this.cartItems[index].selected = !this.cartItems[index].selected;
				}
				// 检查是否所有商品项都被选中，如果是则全选按钮置为 true，否则置为 false
				this.selectAll = this.cartItems.every((item) => item.selected);
			},
			toggleSelectAll() {
				console.log("全选")
				this.selectAll = !this.selectAll;
				// 在点击全选按钮时，更新所有商品项的选中状态
				this.cartItems.forEach((item) => {
					item.selected = this.selectAll;
				});
			},
			async getCartList() {
				// console.log()
				var parms = {}
				var response = await this.$http.getCartList(parms)
				if (response.code == 1) {
					this.cartItems = response.data.data
				}
				this.selectAll = this.cartItems.every((item) => item.selected);
			}
		},
		onShow() {
			this.getCartList();


		},
		computed: {
			totalPrice() {
				return this.cartItems.reduce((total, item) => {
					if (item.selected) {
						return total + item.price * item.quantity;
					}
					return total;
				}, 0);
			},
		},
		beforeRouteEnter(to, from, next) {
			console.log(111111, to, from, next)
			return
		}
	}
</script>

<style>
	/* 样式可以根据实际需求进行调整 */
	.cart-container {
		padding: 20px;
	}

	.empty-cart {
		text-align: center;
		margin-top: 50px;
	}

	.total-price {
		text-align: right;
		margin-top: 10px;
		font-size: 16px;
	}

	.checkout-button {
		background-color: #007aff;
		color: #fff;
		text-align: center;
		padding: 10px;
		margin-top: 20px;
		border-radius: 5px;
		font-size: 16px;
	}
</style>